<template>
	<view class='identify'>
		<view class="titles">
			<view class="tit1">请选择您的角色</view>
			<view class="tit2">选择后也可以任务切换角色</view>
		</view>
		<view class="list">
			<view class="card dFlex jAround_aCenter" :class='{
				"active":identify == "2"
			}' @tap="changeIdentify('2')">
				<view class="cardImg imgPublic dFlex jCenter_aCenter">
					<image class="car" src="../static/images/che@2x.png" mode='widthFix'></image>
				</view>
				<view class="cardInfo">
					<view class="descTit">我是车主</view>
					<view class="desc">TRUCK OWNER</view>
				</view>
			</view>
			<view class="card dFlex jAround_aCenter"  :class='{
				"active":identify == "1"
			}' @tap="changeIdentify('1')">
				<view class="cardImg imgPublic dFlex jCenter_aCenter">
					<image class="huo" src="../static/images/huo@2x.png" mode='widthFix'></image>
				</view>
				<view class="cardInfo">
					<view class="descTit">我是货主</view>
					<view class="desc">TRUCK OWNER</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		change_info
	} from '@/tool/http.js';
	export default {
		data() {
			return {
				identify:getApp().globalData.identify,
			};
		},
		watch:{
			identify(newVal,oldVal){
				getApp().globalData.identify = newVal;
				uni.setStorageSync('use_identify',newVal);
			},
		},
		methods:{
			// 修改身份
			changeIdentify(status){
				this.identify = status;
				if(status == '2'){
					uni.startLocationUpdate({
						type:'gcj02',
						success: (locate) => {
							console.log(locate);
							if(locate.errMsg == "startLocationUpdate:ok"){
								uni.onLocationChange(async(res)=>{
									console.log('更新的位置',res);
									if(res.latitude && res.longitude){
										var oldPos = uni.getStorageSync("oldPos");
										if(!oldPos || oldPos != (res.latitude+'-'+res.longitude)){
											var res = await change_info({
												memberId:uni.getStorageSync('uid'),
												lat:res.latitude,
												lng:res.longitude
											});
											if(res){
												uni.setStorageSync('oldPos',res.latitude+'-'+res.longitude);
											}
										}
									}
								})
							}
						},
						fail:(err)=>{
							console.log(err);
						}
					})
				}
				uni.switchTab({
					url:'/pages/bench'
				})
			},
		}
	}
</script>

<style lang="scss">
	.identify{
		.list{
			.card{
				.cardImg{
					.huo{
						width: 60px;
					}
					.car{
						width: 90px;
					}
					flex:1;
					height: 65.94px;
				}
				.cardInfo{
					.descTit{
						color: #0087FC;
						font-size: 20px;
						font-weight: bold;
						margin-bottom: 12px;
					}
					color: #333333;
					font-size: 12px;
					width: calc(14px * 10);
				}
				width: 100%;
				background:#F8F8F8;
				padding: 30px 30px 24px;
				box-sizing: border-box;
				border-radius: 10px;
				margin-top: 30px;
				border: 1px solid #F8F8F8;
			}
			.active{
				border-color: #0087FC;
			}
			width: 100%;
			margin-top: 40px;
		}
		.titles{
			.tit1{
				font-size: 28px;
				font-weight: bold;
				margin-bottom: 12px;
				color: #000000;
			}
			color: #999999;
			font-size: 12px;
			width: 100%;
			text-align: center;
			margin-top: 20px;
		}
		width: 100%;
		padding: 40px 30px;
		box-sizing: border-box;
	}
	page{
		background: white;
	}
</style>
